<template>
  <div class="main-content customer-list-wrapper">
    <div class="filter-box">
      <p class="title">客户查询</p>

      <el-form :inline="true" :model="form">
        <div class="item">
          <el-form-item label="客户名称">
            <el-input
              v-model="form.nickname"
              placeholder="请输入"
              clearable
              @clear="searchFn"
              
            />
          </el-form-item>
          <el-form-item label="客户类型">
            <el-select
              v-model="form.type"
              placeholder="请选择"
              clearable
              @clear="searchFn"
            >
              <el-option label="直客" :value="1" />
              <el-option label="伙伴" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="伙伴级别">
            <el-select
              v-model="form.level"
              placeholder="请选择"
              clearable
              @clear="searchFn"
            >
              <el-option label="总代" :value="1" />
              <el-option label="一代" :value="2" />
              <el-option label="二代" :value="3" />
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="联系方式">
            <el-input
              v-model="form.mobile"
              placeholder="请输入"
              clearable
              @clear="searchFn"
              
            />
          </el-form-item>
          <el-form-item label="客户账号">
            <el-input
              v-model="form.accountName"
              placeholder="请输入"
              clearable
              @clear="searchFn"
              
            />
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="content-box">
      <ct-table :options="tableOptions">
        <template v-slot:index="scope">
          <span>{{ scope.row.index }}</span>
        </template>
        <template v-slot:type="scope">
          <span>{{ scope.row.type === 1 ? "直客" : "伙伴" }}</span>
        </template>
        <template v-slot:realInfo="scope">
          <span>{{ scope.row.realInfo }}</span>
        </template>
        <template v-slot:operate="scope">
          <el-text type="primary" @click="toDetail(scope.row)"> 详情 </el-text>
        </template>
      </ct-table>

      <ct-pagination :options="pageOptions" :pageEvent="getListData">
      </ct-pagination>
    </div>
  </div>
</template>

<script setup>
import { getMemberList } from "@/api/index";
import { useRouter } from "vue-router";
const router = useRouter();

const { proxy } = getCurrentInstance();

import CtTable from "@/components/CtTable.vue";
import CtPagination from "@/components/Pagination.vue";

import { usePageOptions } from "@/hooks/usePageOptions";
const { pageOptions } = usePageOptions();

let form = ref({
  nickname: "",
  type: "",
  mobile: "",
  accountName: "",
  level:""
});

function toDetail(row) {
  router.push({
    name: "customerDetail",
    query: {
      id: row.id,
    },
  });
}

let tableOptions = reactive({
  data: [],
  loading: false,
  columns: [
    {
      label: "序号",
      prop: "index",
      width: 80,
      isCustom: true,
    },
    {
      label: "客户名称",
      prop: "nickname",
    },
    {
      label: "客户账号",
      prop: "accountName",
    },
    {
      label: "联系方式",
      prop: "mobile",
    },
    {
      label: "上月消费",
      prop: "lastMonth",
    },
    
    {
      label: "本月消费",
      prop: "thisMonth",
    },
    {
      label: "算力券余额",
      prop: "voucherMoney",
    },
    {
      label: "客户类型",
      prop: "type",
      isCustom: true,
    },
    {
      label: "归属伙伴",
      prop: "attributionName",
    },
    {
      label: "伙伴级别",
      prop: "agentTypeName",
    },
    {
      label: "实名类型",
      prop: "realInfo",
    },
    {
      label: "操作",
      prop: "operate",
      isCustom: true,
    },
  ],
});


function getListData() {
  tableOptions.loading = true;

  const { currentPage, pageSize } = pageOptions;
  const { nickname, type, mobile, accountName,level } = form.value;

  getMemberList({
    accountName,
    mobile,
    nickname,
    page: currentPage,
    pageSize,
  })
    .then((res) => {
      const { content, totalElements } = res.data;
      if (content.length) {
        for (let i = 0; i < content.length; i++) {
          content[i].index = proxy.$handleIndex(i, pageOptions);
          content[i].lastMonth = parseFloat(content[i].lastMonth.toFixed(2)) 
          content[i].thisMonth = parseFloat(content[i].thisMonth.toFixed(2)) 
          content[i].voucherMoney = parseFloat(content[i].voucherMoney.toFixed(2)) 
        }
      }
      tableOptions.data = content;
      tableOptions.loading = false;
      pageOptions.total = totalElements;
    })
    .catch(() => {
      tableOptions.loading = false;
    });
}

const searchFn = proxy.$debounce(() => {
  tableOptions.data = [];
  pageOptions.currentPage = 1;
  pageOptions.total = 0;

  getListData();
});

onMounted(() => {
  getListData();
});
</script>

<style lang="scss" scoped>

</style>
